<!--
 * @Date: 2021-12-14 10:58:02
 * @LastEditors: LeeKing
 * @LastEditTime: 2021-12-16 21:32:02
 * @FilePath: \admin\src\views\order\orders\index.vue
-->
<template>
  <div class="Orders">
    <el-card class="box-card">
      <!-- 搜索 -->
      <div class="Search_input">
        <el-input v-model="input" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search" />
        </el-input>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column type="index" prop="index" label="#" width="48" />
        <el-table-column prop="order_number" label="订单编号" width="250" />
        <el-table-column prop="order_price" label="订单价格" width="300" />
        <el-table-column prop="order_pay" label="是否付款" width="300">
          <template scope="scope">
            <el-tag
              v-if="scope.row.order_pay === '1'"
              v-model="scope.row"
              effect="dark"
              size="small"
            >已付款</el-tag>
            <el-tag
              v-else
              v-model="scope.row"
              type="danger"
              effect="dark"
              size="small"
            >未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="300" />
        <el-table-column prop="update_time" label="下单时间" width="300">
          <template scope="scope">
            {{ scope.row.update_time | dateFormat }}</template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="129">
          <template>
            <el-tooltip content="修改订单地址" placement="top">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="EditAddress"
              />
            </el-tooltip>
            <el-tooltip content="物流信息" placement="top">
              <el-button
                type="success"
                icon="el-icon-location-outline"
                size="mini"
                @click="loadLogistics"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 物流信息 -->
      <el-dialog title="物流进度" :visible.sync="logistics" width="50%">
        <div class="timeline">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in LogisticsInfo"
              :key="index"
              :timestamp="activity.time"
              :color="activity.color"
              :icon="activity.icon"
            >
              {{ activity.context }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="logistics = false">取 消</el-button>
          <el-button type="primary" @click="logistics = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- //修改地址 -->
      <el-dialog title="修改地址" :visible.sync="Address" width="50%">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="省市区/县" prop="address">
            <el-cascader
              v-model="ruleForm.address"
              :options="cityOptions"
              change-on-select
            />
          </el-form-item>
          <el-form-item label="详细地址" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm">取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
          >确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getOrdersList, getlogisticsInfo } from '@/api/order.js'
import cityOptions from '@/utils/city_data2017_element.js'
export default {
  name: 'Orders',
  data() {
    return {
      tableData: [],
      // 搜索框的值
      input: '',

      // 分页
      // 当前页数，支持 .sync 修饰符
      currentPage: 1,
      // 每页显示的条数
      pagesize: 10,
      // 总数
      total: null,

      // 点击改变每页的条数
      Changepagesize: null,

      // 物流弹窗
      logistics: false,
      // 物流信息
      LogisticsInfo: [],

      // 修改地址
      Address: false,
      cityOptions: cityOptions,
      ruleForm: {
        name: '',
        address: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入省市区/县', trigger: 'blur' }
        ]
      }
    }
    // 物流信息弹框
  },

  created() {
    this.OrdersList()
  },

  methods: {
    // 获取订单列表数据
    async OrdersList() {
      const res = await getOrdersList({
        pagenum: this.currentPage,
        pagesize: this.pagesize
      })
      console.log(res)
      this.tableData.push(...res.data.goods)
      this.total = res.data.total
      this.currentPage = res.data.pagenum
      this.currentPage = parseInt(this.currentPage)
    },
    // 改变每页的数据
    async handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      const res = await getOrdersList({
        pagenum: this.currentPage,
        pagesize: val
      })
      console.log(res)
      this.tableData = []
      this.tableData.push(...res.data.goods)
      this.total = res.data.total
      this.currentPage = res.data.pagenum
      this.currentPage = parseInt(this.currentPage)
      this.Changepagesize = val
    },
    // 改变当前页
    async handleCurrentChange(val) {
      this.tableData = []
      console.log(`当前页: ${val}`)
      const res = await getOrdersList({
        pagenum: val,
        pagesize: this.Changepagesize || this.pagesize
      })
      console.log(res)
      this.tableData = []
      this.tableData.push(...res.data.goods)
      this.total = res.data.total
      this.currentPage = res.data.pagenum
      this.currentPage = parseInt(this.currentPage)
    },

    // 获取物流信息
    async loadLogistics() {
      this.logistics = true
      const res = await getlogisticsInfo(1106975712662)
      console.log(res)
      this.LogisticsInfo = res.data
      this.LogisticsInfo[0].color = '#0bbd87'
      this.LogisticsInfo[0].icon = 'el-icon-location-outline'
      console.log(this.LogisticsInfo)
    },

    // 修改地址
    EditAddress() {
      this.Address = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          this.Address = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.Address = false
    }
  }
}
</script>

<style scoped lang="scss">
.Orders {
  .Search_input {
    width: 500px;
    margin-bottom: 20px;
  }
  .block {
    margin-top: 20px;
  }
}
</style>
